import React, { Component } from 'react';
import { Modal } from 'antd';
import { observer } from 'mobx-react';

interface AgreeModalProps {
  /**
   * 标题
   */
  title: string;
}

interface AgreeModalState {
  /**
   * modal是否可见
   */
  visible: boolean;
}
@observer
export default class AgreeModal extends Component<
  AgreeModalProps,
  AgreeModalState
> {
  constructor(props: AgreeModalProps) {
    super(props);
    this.state = {
      visible: false,
    };
  }

  onClick = () => {
    this.setState({ visible: true });
  };

  handleOk = () => {
    this.setState({ visible: false });
  };

  handleCancel = () => {
    this.setState({ visible: false });
  };

  render() {
    const { visible } = this.state;
    const { title, children } = this.props;
    return (
      <>
        <a onClick={this.onClick}>{title}</a>
        <Modal
          title={title}
          visible={visible}
          width={1000}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
        >
          {children}
        </Modal>
      </>
    );
  }
}
